<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>
         .taps {
             width: 150px;
             border: 1px #ccc solid;
         } 
        .item {
             height: 30px;
             width: 49px;
             float: left;
             border-left: 1px #ccc solid;
             text-align: center;
             line-height: 30px;
         }
         .clearFix::after {
             content: '';
             display: block;
             clear: both;
         }
         .context {
             position: relative;
             width: 150px;
             height: 100px;
             border: 1px #ccc solid;
             border-top: none;
             /* text-align: center;
             line-height: 100px; */
         }
         .text {
             position: absolute;
             width: 150px;
             height: 100px;
             border-top: none;
             text-align: center;
             line-height: 100px;
             display: none;
         }
         .active {
             background: pink;
         }
         .show {
             display: block
         }
     </style>
</head>
<body>
    <div class="wrap">
        <div class="taps clearFix">
            <div class="item active">体育</div>
            <div class="item ">语文</div>
            <div class="item ">数学</div>
        </div>
        <div class="context">
              <div class="text show">
                    体育
              </div> 
              <div class="text">
                    语文
             </div>
             <div class="text">
                    数学
             </div>
        </div>
    </div>
    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script>
       $(".taps").on("click",".item",function(){
          var index = $(".taps >.item").index($(this)); 
          $(this).addClass("active").siblings().removeClass('active');
          $(".context >.text").eq(index).show().siblings().hide();
       })
    </script>
</body>
</html>